//! webpack配置文件--开发环境

const { resolve } = require('path') //? resolve是用于拼接绝对路径的方法
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

//* 设置nodeJs环境变量，默认是production
process.env.NODE_ENV = 'development'

const commonCssLoader = [
    'style-loader', //? 创建style标签 ，将css-loader编译的commonjs模块添加到head中生效，由于支持HMR，一般用于开发环境
    'css-loader', //? 将css文件变为commonjs模块，里面内容是样式字符串
    {
        loader: 'postcss-loader', //? 使用postcss-loader进行css兼容性处理
        options: {
            ident: 'postcss',
            plugins: () => [
                //? postcss-preset-env 会读取package.json中的browserslist，为postcss-loader服务
                //? 可以为borwserslist分别配置开发和生产两套环境，但是默认加载生产环境的，需要配置nodejs的运行环境（见顶部设置部分）
                require('postcss-preset-env')()
            ]
        }
    }
]

module.exports = {
    entry: ['./src/index.js', './src/index.html'], //? webpack入口起点
    output: { //? 打包输出目标
        filename: 'js/built.js', //? 前面可加路径，后续会生成到对应目录中
        path: resolve(__dirname, 'build') //? __dirname是nodejs的一个变量，代表当前文件所在文件目录的绝对路径
    },
    module: { //? loader的配置位置
        rules: [{
            test: /.css$/, //? 匹配哪些类型的文件
            use: [ //? 使用哪些load去处理这些文件（webpack默认使用compose形式，如果有多个load，会从右往左执行）
                ...commonCssLoader
            ],
        },
        {
            test: /.less$/, //? 匹配哪些类型的文件
            use: [ //? 使用哪些load去处理这些文件（webpack默认使用compose形式，如果有多个load，会从右往左执行）
               ...commonCssLoader,
                'less-loader', //? 将less文件编译成css文件
            ],
        },
        {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader', //? 如果只有一个load，可以直接使用loader指定（需要下载url-loader和file-loader两个包）
            options: {
                esModule: false, 
                limit: 8 * 1024, //? 设置一个阀值(单位：B)，小于这个值的会使用base64处理
                outputPath: 'img'
            },
        },
        {
            test: /\.html$/, //? 此loader专用于处理html中的图片资源(负责引入图片，从而能被url-loader引入处理)
            loader: 'html-loader',
        },
        {
            test: /\.js$/, //? 针对js进行兼容性处理
            exclude: /node_modules/, //? 第三方引入的包不进行此处理
            loader: 'babel-loader',
            options: {
                presets: [
                    [
                        "@babel/preset-env",
                        {
                            "useBuiltIns": "usage", //? 使用usage将只引入使用到的库，会大大减少最终生成的包的体积
                            "corejs": "3",
                        }
                    ]
                ]
            }
        },
        {
            exclude: /\.(css|less|js|json|html|jpg|png|gif)$/, //? 使用exclude表示除了指定的类型外都做这种处理
            loader: 'file-loader',
            options: {
                outputPath: 'other',
            }
        }]
    },
    plugins: [ //? 插件的配置位置
        new OptimizeCssAssetsPlugin(), //? 对CSS进行压缩
        new HtmlWebpackPlugin({
            template: './src/index.html', //? 复制模板文件，然后自动引入打包的其他所有资源（不指定template则会生成一个空的html文件）
            minify: false, //? 当mode为production时，默认会进行html压缩，如果这里再设置压缩的话，容易导致异常(base64图片)，而开发模式不需要压缩
        }),
    ],
    mode: "development", //? 运行环境，可以是 development 或是 production
    devServer: { //? 热加载，启动指令为 npx webpack-dev-server
        contentBase: resolve(__dirname, 'build'), //? 项目构建后路径（但是只在内存中打包，不会输出到build目录）
        compress: true, //? 是否使用gzip压缩
        port: 4560, //? 启动端口号
        open: true, //? 是否自动启动浏览器（使用默认浏览器）
        hot: true, //? 是否启动HMR(模块热加载)
    },
}